<template>
  <div class="loan">
    <Top title="贷款" iconShow="0"></Top>
    <!-- 导航start -->
    <div class="tab">
      <div :class="index==indexC+1?'tab-item selected':'tab-item'"  v-for="(item,indexC) in navList" :key="indexC" @click="handler(item.sortInfoId)">
        <div class="navBar">
          {{item.sortAllName}}
        </div>
      </div>
    </div>
    <!-- 导航end -->
    <div style="height:2.4rem"></div>
    <!-- 列表start -->
    <div class="loan-content" v-for="(item,index) in dataList" :key="index">
      <div class="loan-content-logo">
        <div class="loan-content-logo-img" @click="goDetail(item.platformId)">
          <img :src="item.logo" alt="贷款">
        </div>
      </div>
      <div class="loan-content-detail">
        <div class="loan-content-detail-top clearfix">
          <div class="loan-content-detail-top-left">
            <p @click="goDetail(item.platformId)">{{item.abbreviation}}</p>
            <div>
              <ul class="clearfix">
                <li v-for="(itemC,idx) in item.label.split(',')" :key="idx">{{itemC}}</li>
              </ul>
            </div>
          </div>
          <div class="loan-content-detail-top-right">
            <mt-button type="primary" @click="goDetail(item.platformId)">
              立即申请
            </mt-button>
          </div>
        </div>
        <div class="loan-content-detail-mid">
          <span>¥</span>
          <span>{{item.quato}}</span>
          <span>额度范围&nbsp;(元)</span>
        </div>
        <div class="loan-content-detail-bot">
          <ul>
            <li>{{item.lendSpeed}}放款</li>
            <li>参考日费率:{{item.dailyInterestRate}}%</li>
            <li>贷款期限{{item.maxCycle}}</li>
          </ul>
        </div>
      </div>
    </div>
      <loading title="加载中..."  v-if="loadMoreShow"></loading>
      <Nomore v-if="noMoreShow"></Nomore>
    <!-- 列表end -->
    <!-- 悬浮框start -->
    <!-- <div class="loan-float" @click="goStar">
      <img :src="float.logo">
      <div class="title">{{float.abbreviation}}</div>
      <div class="hot">HOT</div>
    </div> -->
    <!-- 悬浮框end -->
    <Foot aIndex="1"></Foot>
  </div>
</template>

<script>
import Vue from 'vue'
import '../../../js/lib/flexble.js'
import commons from '../../../common/js/common.js'
import Top from 'components/Header/Header'
import Foot from 'components/Footer/Footer'
import { Indicator, MessageBox,Toast } from "mint-ui";
export default {
  name: 'login',
  data() {
    return {
      selected: '1',
      navList: [],
      navListOther: [],
      dataList: [],
      index: commons.getParameter('index')?commons.getParameter('index')*1:1,
      pageNum: 1,
      flag: true,
      loadMoreShow: false,
      noMoreShow: false,
      float:{
        logo:'',
        abbreviation:''
      }
    }
  },
  mounted(){
    Vue.http.interceptors.push((request, next) => { //请求拦截器
      //请求前
      request.headers.set('token', commons.getCookie('token')); //设置请求头
      Indicator.open('加载中...'); //请求loading
      next((response) => {
        //请求后
        Indicator.close(); //隐藏loading
        return response
      })
    })
    if(commons.getParameter('channel')){
      window.sessionStorage.setItem('channel',this.getParameter('channel'));
    }
    //导航标题
    this.$http.get("/loansupermarket-app/platform/getPlatformSortName")
      .then((response) => {
        var resBody = response.body;
        if (resBody.code == '000') {
          // 如果接口请求成功列表实例化
          this.navList = resBody.data;
        } else {
          MessageBox.alert(resBody.mesg);
        }

      })
    
    // 悬浮框
    this.$http.get("/loansupermarket-app/platform/getPlatformDetail?status=1")
      .then((response) => {
        var resBody = response.body;
        if (resBody.code == '000') {
          this.float.logo=resBody.data.logo;
          this.float.abbreviation=resBody.data.abbreviation.substring(0,4);
        } else {
          MessageBox.alert(resBody.mesg, '提示');
        }

      })

    //列表默认页
    //this.getList(this. pageNum);
    this.navlist(this.index);

  },
  // 组件包含头部，密码登录，验证码登录
  components: { Top,Foot },
  created() {
    var _this = this;
    // 当dom元素创建完成后，监听滚动条
    this.$nextTick(function() {
      window.addEventListener('scroll', onScroll)
    })
    function onScroll() {
      var scrollTop = document.body.scrollTop;
      var innerHeight = window.innerHeight;
      var offsetHeight = document.body.offsetHeight;
      if (scrollTop + innerHeight >= offsetHeight) {
        if (_this.flag) {
          _this.flag = false;
          // 当滚动条到下面，加载分页数据
          _this.getList();
        }
      }
    }
  },
  methods: {
    handler(id){
      if(this.index==id){
        return;
      }else{
        this.index=id;
      }
      //请求列表的数据
      this.navlist(this.index);
    },
    navlist(index){
        this.$http.get("/loansupermarket-app/platform/getPlatformList?pageNum="+1+"&pageSize=6&sortInfoId=" + this.index)
        .then((response) => {
          // 当index变化以后，重置当前排序列表页数
          this.pageNum = 1;
          // ‘没有更多了’ 不显示
          this.noMoreShow = false;
          var resBody = response.body;
          if (resBody.code == '000') {
            // 列表实例化
            this.dataList = resBody.data;
            // 如果当前页数的数据长度小于6，那么说明当前页是最后一页，让flag=false不再调用接口
            if (resBody.data.length < 6) {
              this.noMoreShow = true;
              this.flag = false;
            } else {
              this.flag = true;
            }
            // 每当index变化，他的滚动条要滚到最上面，要不然会造成滚动条在很下面然而并没有数据反馈
            document.body.scrollTop = 0;
          } else {
            MessageBox.alert(resBody.mesg);
          }
        })
    },
   getList() {
      // 页数加一
      this.pageNum += 1;
      this.loadMoreShow = true;
      var _this = this;
      setTimeout(function() {
        _this.$http.get("/loansupermarket-app/platform/getPlatformList?pageNum=" + _this.pageNum + "&pageSize=6&sortInfoId=" + _this.index)
          .then((response) => {
            _this.loadMoreShow = false;
            var resBody = response.body;
            if (resBody.code == '000') {
              // 加载完分页数据后，拼接到前面加载好的的数组
              _this.dataList = _this.dataList.concat(resBody.data);
              if (resBody.data.length < 6) {
                // 当前页加载的条数小于6条时，说明最后一页，加载loading关闭
                _this.noMoreShow = true;
                _this.flag = false;
              } else {
                _this.flag = true;
              }
            } else {
              MessageBox.alert(resBody.mesg);
            }
          })
      }, 500)
    },
    // 非明星产品进入产品详情页   非明星产品status=2，明星产品status=1
    goDetail(id) {
       //注意这个请求是为后面的我的足迹中的产品添加记录
      this.$http.post('/loansupermarket-app/foot/insertInformationVisit',{token:commons.getCookie('token'),visitType:3,informationId:id}).then((response)=>{
        window.location.href='./product.html?id='+id+'&status=2'+'&index='+this.index;
        //window.location.href=commons.paths+'/product.html?id='+id+'&status=2'+'&index='+this.index;
      });
       
    },
    // 进入明星产品
    goStar() {
      var token = commons.getCookie('token') || '';
      this.$http.post("/loansupermarket-app/platform/visitCount", { token: token, starPlatformId: 0,phone:window.sessionStorage.getItem('phone'),channel:window.sessionStorage.getItem('channel')?window.sessionStorage.getItem('channel'):'' })
        .then(function(response) {
          window.location.href='./product.html?status=1';
        }).catch(()=>{
          window.location.href='./product.html?status=1';
          //window.location.href=commons.paths+'/product.html?status=1';
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../../scss/base.scss';
.loan{
  padding-bottom: 1.4rem;
  .tab{
      margin-top: 1.2rem;
      position: fixed!important;
      width: 100%;
      top: 0;
      background: #fff;
      z-index: 3;
      height: 1.2rem;
      line-height: 1.2rem;
      display: flex;
    &-item{
      display: block;
      flex: 1;
      -webkit-box-flex: 1;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      background: linear-gradient(180deg,#e5e5e5,#e5e5e5,hsla(0,0%,90%,0)) 0 100% no-repeat;
      background-size: 100% 1px;
      font-size: 14px;
      text-align: center;
      line-height: 44px;
      color: #666;
      .navBar{
        border-right: 1px solid #e4e4e4;
        height: 20px;
        line-height: 20px;
        font-size: .4rem;
        margin-top: 10px;
      }
    }
    .selected{
      color: rgb(48, 204, 219);;
      border-bottom: 3px solid rgb(48, 204, 219);
    }
  }
  &-content {
    width: 100%;
    margin-top: 0.27rem;
    display: flex;
    &-logo {
      flex: 2;
      background: #fff;
      padding: 0.3rem 0;
      &-img {
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 50%;
        margin: 0.4rem auto;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    &-detail {
      flex: 8;
      background: #fff;
      padding: 0.3rem 0;
      &-top {
        &-left {
          float: left;
          text-align: left;
          width: 5.5rem;
          p {
            text-align: left;
            margin-top: 0.38rem;
            height: 0.4rem;
            font-size: 0.42rem;
          }
          ul {
            margin-top: 0.32rem;
            li {
              float: left;
              width: 1.32rem;
              height: 0.45rem;
              border: 1px solid #959595;
              text-align: center;
              line-height: 0.45rem;
              border-radius: 0.12rem;
              margin-right: 0.13rem;
              color: #959595;
              margin-top: 0.1rem;
              font-size: 12px;
            }
          }
        }
        &-right {
          float: left;
          width: 2.3rem;
          .mint-button--normal, .mint-button--small {
              display: inline-block;
              padding: 0 12px;
          }
          .mint-button {
            margin-top: 0.4rem;
            font-size: 0.36rem;
            height: 0.9rem;
          }
        }
      }
      &-mid {
        height: 0.4rem;
        margin-top: 0.3rem;
        text-align: left;
        span:nth-of-type(1) {
          color: #ff5249;
          font-size: 0.42rem;
        }
        span:nth-of-type(2) {
          color: #ff5249;
          font-size: 0.5rem;
          margin-left: 0.1rem;
        }
        span:nth-of-type(3) {
          color: #959595;
          font-size: 0.3rem;
          margin-left: 0.25rem;
        }
      }
      &-bot {
        ul {
          padding: 0.35rem 0;
          li {
            float: left;
            padding: 0 0.2rem;
            font-size: 0.3rem;
            &:nth-of-type(1) {
              padding-left: 0;
            }
            &:nth-of-type(2) {
              border-left: 1px solid #e4e4e4;
              border-right: 1px solid #e4e4e4;
            }
          }
        }
      }
    }
  }
  &-float {
    width: 2.88rem;
    height: 3.12rem;
    position: fixed;
    bottom: 2.26rem;
    right: 0rem;
    background: red;
    background: url('../../../assets/float.png');
    background-size: contain;
    animation: myfirst 1.5s infinite linear;
    text-align:center;
    img{
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 50%;
      margin-top: 0.51rem;
    }
    .title{
      color:#ff5b52;
      font-size: 0.3rem;
    }
    .hot{
      position: absolute;
      top: 0.51rem;
      right:0.53rem;
      background: url('../../../assets/hot.png');
      background-size: contain;
      color:#fff;
      font-size:12px;
      padding: 2px;
    }
  }
  @-webkit-keyframes myfirst {
    0% {
      right: 0rem;
    }
    50% {
      right: 0.4rem;
    }
    100% {
      right: 0
    }
  }
}

</style>
